<template>
  <transition name="fade">
    <div class="keyboard" v-show="keyboard">
      <ul>
        <li @click="addition(index,item)" :class="{'del': index === 11}" v-for="(item,index) in btnNumber">{{item}}</li>
      </ul>
    </div>
  </transition>

</template>
<script>
    // my-keyboard 的用法
    /*created(){
        this.$bus.$on('model',(val)=>{
            this.ipt = val;
        })
    }*/

    export default {
        data(){
            return{
                btnNumber:[1,2,3,4,5,6,7,8,9,'C',0,null],
                ipt:''
            }
        },
        created(){
            this.$bus.$on('cache',(val)=>{
                this.ipt = val;
            });
        },
        props:{
          keyboard:{
            type:Boolean,
            default:false
          }
        },
        methods:{
            addition(key,value){
                if(key===9){
                    this.ipt = '';
                    this.$bus.$emit('model',this.ipt)
                }else if(key===11){
                  this.ipt&&(this.ipt = this.ipt.substring(0,this.ipt.length-1));
                  this.$bus.$emit('model',this.ipt);
                }else {
                    this.ipt += value;
                    this.$bus.$emit('model',this.ipt)
                }

            }
        }
    }
</script>
<style scoped>
  .fade-enter{
    opacity: 0;
    bottom: -1000px;
  }
  .fade-enter-active{
    transition: all .3s ease;
  }
  .fade-leave-active{
    transition: all .1s ease;
  }
  .fade-enter-to{
    opacity: 1;
    bottom: 0;
  }
  .fade-leave-to{
   bottom: -1000px;
  }
  ul{
        user-select: none;
        list-style: none;
        width: 100%;
        position: fixed;
        bottom: 0;
        border-top:2px solid #eee;
        border-left:1px solid #eee;
        /*font-family: 华文宋体;*/
    }
    li,.del{
        background: #fff;
        vertical-align: middle;
        display: inline-block;
        width: 33.3333%;
        box-sizing: border-box;
        height: 8vh;
        line-height: 8vh;
        text-align: center;
        font-size:44px;
        color: #3c3c3c;
        border-bottom:1px solid #eee;
        border-right:1px solid #eee;

    }
    li:active{
        box-shadow: inset 1px 1px 28px 5px #eee;
    }
    .del:active{
      box-shadow: none;
    }
    .del{
        width: 20%;
        margin-left:7%;
        border: none;
        box-sizing: border-box;
        transform: rotate(90deg);
        background-size: 50px 50px;
        background:url('../../assets/SecurityClose.png') no-repeat 50%;
    }
</style>
